import utils from '../../utils/utils'
import { inflate } from 'zlib';
import { stringify } from 'querystring';
let demo = () => {
    // ### 001.symbol
    //```
    //基本数据类型 独一无二
    // const s1:symbol =Symbol(1);
    // const s2:symbol =Symbol(1);
    // console.log(s1===s2);
    // //可以做为对象的key
    // let s3 ={
    //     [s2]:'222',
    //     name:222,
    //     age:18
    // }
    // console.log(s3);
    // console.log(s3[s2]);
    // console.log(s3.s2);//这样是不行的 这是key为s2的数据
    // //一般遍历是无法遍历到他的
    // for(let ii1 in s3){
    //     console.log(ii1)
    // }
    // console.log(Symbol.for('aaa'));//全局声明一个 值为aaa的symbol
    // let s4 ={
    //     [Symbol.for('aaa')]:''

    // }
    // console.log(s4);
    // console.log(Symbol.keyFor(Symbol.for('aaa')));//aaa 找到这个的值是谁
    //```

    // ### 002.混合类型接口
    //```
    interface Int2 {
        (age:number):void,
    }
    const fun2:Int2 = (age:number)=>{
        console.log(age);
    }
    fun2(222)

    //第三个混合类型示例
    //声明一个接口 下面这个就是混合接口的写法
    // interface Counter{
    //     interval:number;
    //     reset():void;
    //     (start:number):void;
    // }
    // //使用上面的混合接口
    // let c2:Counter = ()=> {};//声明一个数据类型为 Counter 接口类型的变量
    // //引用接口中定义的方法
    // c2(10)

    // c2.reset();
    //```

    // ### 003 supper  class
    //```
    interface Name {
        name:string
    }
    class AA {
        name:string;
        constructor(name:string){
            this.name=name;
        }
        getName() {
            console.log(this.name);
        }
    }
    class BB extends AA {
        constructor(name:string){
            super(name);
        }
        getName1() {
            console.log(super.getName());//super 指向 父级的原型对象
        }
    }
    let b3 =new BB('3333333');
    b3.getName();
    b3.getName1();
    //```

    // ### 004 ts class
    //get set 都是执行 调用的时候会触发当前函数
    //```
    class A4<S,N> {
        name:S
        age:N
        constructor(name:S,age:N){
            this.name=name;
            this.age=age;
        }
        public getThis(){
            return this.name;
        }
    }
    //```
    // ### 005 hook useRef 因为变更 current 属性不会引发组件重新渲染，用于存最新的值
    //```
    //当我们更新状态的时候, React 会重新渲染组件, 每一次渲染都会拿到独立的 count 状态,  
    //并重新渲染一个   函数.  每一个  里面都有它自己的 count 
    // let test =useRef(); //{current: undefined} 自带current 属性
    // 状态变化 current 属性 不会重新渲染，类似全局变量 可以存当前最新的数据
    // const Counter = () => {
    //     const [count, setCount] = useState<number>(0)
    //     const preCountRef = useRef<number>(count)
        
    //     useEffect(() => {
    //         preCountRef.current = count
    //     })
        
    //     return (
    //         <div>
    //             <p>pre count: { preCountRef.current }</p>
    //             <p>current count: { count }</p>
    //             <button onClick={() => setCount(count + 1)}>加</button>
    //         </div>
    //     )
    // }
    
    // ### 005 hook useCallback  memo就是监听数据变化 ，第二给参数 没变化 就是不重新渲染 ，变化就渲染
    // 单纯的优化性能别想多了，不要为了优化而 优化。 方法体里面的 肯定是要执行的 memo相当于计算属性
    // const [ visible,setVisible ] = useState(false);
    // const [filterParams, setFilterParams] = useState({});  // 查询表单的参数
    
    // function cmp(props) {
    //  requestList 他就是肯定要执行的 只是值没变少执行两次罢了
    //   const requestList = useCallback(async (page) => {
    //     const res = await get_list({ ...filterParams, page});
    //     console.log(res)
    //   },[filterParams])  // 当filterParams被setFilterParams以后，会自动执行
    
    
    //   useEffect( () => { 
    //     requestList();
    //   }, [requestList])
    
    //   useEffect(()=>{
    //     setVisible(props.visible); 
    //   },[props.visible])
    
    //   // 执行查询表单方法的时候，比如点击查询按钮，改变一下请求参数 就自动调用requestList()请求
    //   const handleFilterSubmit = (filterParams) => { 
    //     setFilterParams(filterParams) 
    //   };
    // }


    
}
export default demo;